<template>
  <el-row style="padding: 10px">
    <el-col :span="6"  :offset="5">
      <el-card :body-style="{ padding: '0px'}">
        <img src="../../../../public/login.jpg" class="image" alt="" height="270">
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card :body-style="{ padding: '0px' }" >
        <el-row type="flex" justify="center" style="padding: 20px">
          <span>碳信用联盟后台系统</span>
        </el-row>
        <el-row type="flex" justify="center" style="padding: 20px">
          <el-radio-group v-model="radio">
            <el-radio :label="0">委员会</el-radio>
            <el-radio :label="1">管理机构</el-radio>
            <el-radio :label="2">普通成员</el-radio>
          </el-radio-group>
        </el-row>
        <el-row type="flex" justify="center" style="padding: 20px">
          <span style="color: #d3dce6;">{{computerTime}}</span>
        </el-row>
        <el-row type="flex" justify="center" style="padding: 20px">
          <el-button type="primary" :loading="loginStatus" @click="login(radio)">进入</el-button>
          <el-button type="primary"  @click="applyModal=true">申请</el-button>
        </el-row>
      </el-card>

    </el-col>
    <Modal
        v-model="applyModal"
        title="Title"
        :loading="applyStatus"
        @on-ok="apply('applyForm')">
      <Form ref="applyForm" :model="applyForm" :rules="ruleInline" inline>
        <FormItem prop="username">
          <Input type="text" v-model="applyForm.username" placeholder="企业名称">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="contact">
          <Input type="email" v-model="applyForm.contact" placeholder="邮箱">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
      </Form>
    </Modal>
  </el-row>

</template>

<script>
import {Notification} from "element-ui";

export default {
  name: "login",
  data() {
    return {
      url:'../../../public/login.jpg',
      radio: 2,
      computerTime:new Date(),
      loginStatus:false,
      applyModal:false,
      applyStatus:true,
      applyForm:{
        username:'',
        contact:''
      },
      ruleInline: {
        username: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  mounted(){
    this.watchData()
  },
  methods:{
    watchData() {
      setInterval(() => {
        this.computerTime = new Date()
      }, 1000)
    },
    login(index){
      this.loginStatus = true
      this.LeagueJS.accountsPower(index,status=>{
        if(status){
          this.$emit('childLoginStatus',index)
        }
        this.loginStatus = false
      })
    },
    apply(name){
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!');
          this.LeagueJS.applyIntoLeague(this.applyForm,status=>{
            if(status === true){
              this.$Message.success('申请成功!');
              this.$refs[name].resetFields();
              this.applyModal = false
              this.applyStatus = false
            }else {
              this.$Message.error('申请失败!');
            }
          })
        } else {
          // this.$Message.error('Fail!');
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
